<template>
    <div>
        <section class="login_message register-title">
            登录信息
        </section>
        <!-- <section class="login_message">
            <div>
                <label>
                    <span>用户名</span>
                    <input type="number" maxlength="11" placeholder="手机号码" v-model="phone">
                </label>
            </div>
        </section> -->
        <section class="login_message">
            <div>
                <label>
                <span>登录密码</span>
                <input type="password" maxlength="12" minlength="6" placeholder="6位以上登录密码" v-model="pwd">
            </label>
            </div>
        </section>
        <section class="login_message">
            <div>
                <label>
                <span>再次输入密码</span>
                <input type="password" maxlength="12" minlength="6" placeholder="再次输入登录密码" v-model="repwd">
            </label>
            </div>
        </section>
        <section class="login_message register-title">
            营业时间
        </section>
        <time-set :time='time_interval'></time-set>
        <section class="login_message register-title">
            配送时间
        </section>
        <time-set :time='send_range'></time-set>
        <section class="login_message register-title">
            店铺信息
        </section>
        <section class="login_message">
            <div>
                <label>店铺名称<input type="text" placeholder="请输入店铺名称" v-model="shop_name"></label>
            </div>
        </section>
        <section class="login_message">
            <div>
                <label>
                    配送学校
                    <input
                        type="text"
                        placeholder="请选择可配送学校"
                        v-model="schools"
                        readonly
                        @click="onPopupShow"
                    />
                </label>
            </div>
        </section>
        <section class="login_message">
            <div>
                <label>
                    营业执照单位
                    <input type="text" placeholder="请输入营业执照单位名称" v-model="company_name">
                </label>
            </div>
        </section>
        <section class="login_message">
            <div>
                <label>
                    法定代表人
                    <input type="text" placeholder="请输入法定代表人名称" v-model="legal_name">
                </label>
            </div>
        </section>
        <section class="login_message">
            <div>
                <label>
                    经营地址
                    <input type="text" placeholder="请选择店铺所在地<四川省成都市武侯区人民东路一号>" v-model="address">
                </label>
            </div>
        </section>
        <section class="login_message">
            <div>
                <label>
                    经营范围
                    <input type="text" placeholder="请选择经营范围" v-model="scope_names" readonly @click="onShowScope">
                </label>
            </div>
        </section>
        <section class="login_message">
            <div>
                <label>
                    证件有效期
                    <input type="date" placeholder="食品经营许可证有效日期至" v-model="cert_validity">
                </label>
            </div>
        </section>
        <section class="login_message">
            <div>
                <label>
                    联系方式
                    <input type="number" maxlength="11" placeholder="请输入联系方式" v-model="bank_phone">
                </label>
            </div>
        </section>
        <section class="login_message register-title">
            银行卡信息(选填)
        </section>
        <section class="login_message">
            <div>
                <label>
                    绑定银行卡
                    <input type="number" placeholder="请输入需要绑定的银行卡号" v-model="bank_no">
                </label>
            </div>
        </section>
        <section class="login_message">
            <div>
                <label>
                    开户行
                    <input type="text" placeholder="请输入绑定银行卡开户行" v-model="bank_address">
                </label>
            </div>
        </section>
        <section class="login_message">
            <div>
                <label>
                    预留姓名
                    <input type="text" placeholder="请输入绑定银行卡预留姓名" v-model="bank_name">
                </label>
            </div>
        </section>
        <section class="login_message register-title">
            证件信息
        </section>
        <div class="upload-box">
            <section class="login_message">
                <div>
                    <label>
                        <span>营业执照</span>
                        <Upload class='upload-content' title="营业执照" subTitle="将营业执照置于镜头中央拍摄，并注意减少反光" @getImg="getImg" width="100%" height="7rem"></Upload>
                    </label>
                </div>
            </section>
            <section class="login_message">
                <div>
                    <label>
                        <span>经营许可证</span>
                        <Upload class='upload-content' title="经营许可证件照" subTitle="将经营许可证置于镜头中央拍摄，并注意减少反光" @getImg="getImg" width="100%" height="7rem"></Upload>
                    </label>
                </div>
            </section>
            <section class="login_message">
                <div>
                    <label>
                        <span>Logo图片</span>
                        <Upload class='upload-content' title="商铺logo" subTitle="保存logo图片为正方形，多余部分将会被裁减" @getImg="getImg" width="7rem" height="7rem"></Upload>
                    </label>
                </div>
            </section>
        </div>
        <mt-button class="btn" @click="register">完成注册</mt-button>
        <!-- <section class="login_message">
            <router-link to="/login">
                <div class="to_log">
                    登录
                </div>
            </router-link>
        </section> -->
        <!-- <template>
            <mt-datetime-picker
                ref="picker"
                type="date"
                @confirm="handleConfirm"
                v-model="cert_validity">
            </mt-datetime-picker>
        </template> -->
        <!-- <template>
            <mt-datetime-picker
                ref="time"
                type="time"
                @confirm="timeConfirm"
                v-model="time">
            </mt-datetime-picker>
        </template> -->
        <mt-popup v-model="popupVisible" position="bottom">
            <div class="btn_group"><button @click="()=>{this.popupVisible = !this.popupVisible}">确认</button></div>
            <mt-radio title="选择学校" v-model="schools" :options="schoolList" @change="checkon"></mt-radio>
        </mt-popup>
        <mt-popup v-model="scopeShow" position="bottom">
            <div class="btn_group"><button class="button" @click="()=>{this.scopeShow = !this.scopeShow}">确认</button></div>
            <mt-checklist title="选择经营范围" v-model="scope_names" :options="scopesList" @change="selectScope"></mt-checklist>
        </mt-popup>
    </div>
</template>
<script>
import Upload from "../components/upload";
import timeSet from '../components/timeSet'
import { getSchoolList,register,scopeList } from "../api"
import {verUserInfo} from '../verify'
import {Toast} from 'mint-ui'
export default {
    data() {
        return {
            // phone:'',//用户名
            pwd:'',//密码
            repwd:'',//重复密码
            company_name:'',//公司名称
            legal_name:'',//法人名称
            address:'',//地址
            scope_ids:[],//经营范围
            cert_validity:'',//证件有效日期
            shop_name:'',//店铺名称
            send_start:'',//开始配送时间
            send_end:'',//结束配送时间
            isEnd:false,//是否为结束时间
            time:'',//时间选择
            bank_no:Number,//银行卡号
            bank_address:'',//开户行
            bank_phone:Number,//银行预留电话
            bank_name:'',//银行预留姓名
            logo:'',//店铺logo
            allow_pic:'',//经营许可证照片
            cert_pic:'',//营业执照照片
            schools:"",
            popupVisible: false,
            schoolList:[],
            schoolsData:[],
            schoolsId:"",
            scopesList:[],
            scopeShow:false,
            scope_names:[],
            time_interval:[[]],
            send_range:[[]]
        }
    },
    components: { Upload,timeSet },
    created(){
        this.getschoolList();
        this.getScopeList();
    },
    methods:{
        onShowScope(){
            this.scopeShow = !this.scopeShow;
        },
        selectScope(){
            let scope_ids = [];
            for(let i of this.scope_names){
                for(let a of this.scopeList){
                    if(i == a.name){
                        scope_ids.push(a.id);
                    }
                }
            }
            this.scope_ids = scope_ids.toString();
        },
        getScopeList(){
            scopeList().then(res=>{
                // console.log(res);
                let scopesList = [];
                for(let i of res.data){
                    scopesList.push(i.name);
                }
                this.scopeList = res.data;
                this.scopesList = scopesList;
            })
        },
        checkTime(time){
            return new Promise((resolve, reject)=>{
                let arr = [];
                for(let i in time){
                    if(time[i].length < 2){ 
                        reject("请规范填写时间段");
                    };
                    if(time[i][0] >= time[i][1]){
                        reject("开始时间不能小于结束时间");
                    }
                    let item = time[i].join('-');
                    arr.push(item);
                    if(i>0){
                        if(time[i][1] < time[i - 1][0] || time[i - 1][1] < time[i][0]) {
                        } else {
                            reject("时间段重叠");
                        }
                    }
                }
                resolve(arr);
            })  
        },
        register(){
            this.checkTime(this.time_interval).then(res=>{
                let time_interval = res.toString();
                this.checkTime(this.send_range).then(res=>{
                    const data = {
                        // phone:this.phone,
                        pwd:this.pwd,
                        repwd:this.repwd,
                        company_name:this.company_name,
                        legal_name:this.legal_name,
                        address:this.address,
                        scope_ids:this.scope_ids,
                        cert_validity:this.cert_validity,
                        cert_pic:this.cert_pic,
                        allow_pic:this.allow_pic,
                        logo:this.logo,
                        shop_name:this.shop_name,
                        // send_start:this.send_start,
                        // send_end:this.send_end,
                        school_ids:this.schoolsId,
                        bank_no:this.bank_no,
                        bank_address:this.bank_address,
                        bank_phone:this.bank_phone,
                        bank_name:this.bank_name,
                        time_interval,
                        send_range:res.toString()
                    }
                    let reg = /^1[3-9]\d{9}$/
                    if(!data.pwd){
                        Toast("请输入密码")
                        return;
                    }else if(!data.repwd){
                        Toast("请再次输入密码")
                        return;
                    }else if(data.pwd !== data.repwd){
                        Toast("两次密码不一致");
                        return;
                    }else if(!data.school_ids){
                        Toast("请选择可配送学校")
                        return false;
                    }
                    if(!verUserInfo(data)) return;
                    // console.log(data);
                    // return;
                    register(data).then(res=>{
                        // console.log(res)
                        if(res.code!==200){
                            Toast(res.msg);
                        }else{
                            Toast(`${res.msg},即将跳转登录页面`);
                            setTimeout(()=>{
                                this.$router.push('/login')
                            },2000)
                        }
                    })
                }).catch(err=>{
                    Toast(err);
                })
            }).catch(err=>{
                Toast(err);
            });
            return;
        },
        getImg(data) {
            switch(data[1]){
                case "营业执照":
                   this.cert_pic = data[0];
                break;
                case "经营许可证件照":
                    this.allow_pic = data[0];
                break;
                case "商铺logo":
                    this.logo = data[0];
                break;
            }
        },
        onPopupShow() {
            this.popupVisible = !this.popupVisible;
        },
        openTime(i) {
            if(i){
                this.isEnd = true
            }else{
                this.isEnd = false
            }
        this.$refs.time.open();
      },
    //   timeConfirm(val){
    //       if(this.isEnd){
    //           this.send_end = val;
    //       }else{
    //           this.send_start = val;
    //       }
    //   },
        // handleConfirm(val){
        //     var date = new Date(val);  
        //     this.cert_validity=date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
        // },
        getschoolList(){
            let schoolList = [];
            getSchoolList().then(res=>{
                console.log(res);
                for(let i of res.data.data){
                    schoolList.push(i.name)
                }
                this.schoolList = schoolList;
                this.schoolsData = res.data.data
            })
        },
        checkon: function() {
            let schoolsId = [];
            console.log(this.schools)
            for(let i of this.schoolsData){
                // for(let p of this.schools){
                    if(this.schools === i.name){
                        schoolsId.push(i.id);
                    }
                // }
            }
            schoolsId = schoolsId.toString();
            console.log(schoolsId);
            this.schoolsId = schoolsId;
        },
        // addSend(type){
        //     if(type){
        //         this.time_interval.push([])
        //     }else{
        //         this.send_range.push([])
        //     }
        // },
        // reduceSend(type){
        //     if(type){
        //         if(this.time_interval.length > 1) this.time_interval.pop();
        //     }else{
        //         if(this.send_range.length > 1) this.send_range.pop();
        //     }
            
        // }
    }
}
</script>
<style scoped>
    .btn {
        width: 100%;
        border-radius: 0;
        background: #F0463C;
        color: #fff;
        position: fixed;
        bottom: 0;
        margin: 0;
    }
    .btn_group{
        display: flex;
        justify-content: space-between;
    }
    .mint-radiolist{
        height: 15rem;
        overflow: auto;
    }
    .to_log{
    width: 80%;
    border:1px solid #999;
    padding: 0.6rem 0;
    border-radius: 5px;
    margin: auto;
    }
    .login_message{
        width: 100%;
    }
    .login_message label{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .login_message input{
        border: none;
        width: 60%;
        font-size: 1rem;
        margin: 0;
    }
    .login_message span{
        width: 40%;
        text-align: left;
    }
    .login_message>div{
        border-bottom: 1px solid #d8d8d8;
        width: 90%;
        margin: auto;
    }
    .login_message:last-child{
        border-bottom: 4rem solid #f2f2f2;
    }
    .register-title{
        margin: auto;
        text-align: left;
        background: #f2f2f2;
        line-height: 3rem;
        font-weight: bolder;
        padding-left: 5%;
        width: 95%;
    }
    .upload-box{
        display: inherit;
    }
    .upload-content{
        width: 60% !important;
        margin: 1rem 0 !important;
    }
    .add—time{
        line-height: 3rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .add—time .add{
        color: #333;
        margin: 0 0.4rem;
    }
</style>